<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>基础CSS · Bootstrap 2.3.1 - 中文翻译 - iXieMin</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="assets/css/docs.css" rel="stylesheet">
    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="assets/js/html5shiv.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
                    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
                                   <link rel="shortcut icon" href="assets/ico/favicon.png">

  </head>

  <body data-spy="scroll" data-target=".bs-docs-sidebar">

    <!-- Navbar
    ================================================== -->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="./index.html">Bootstrap</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="">
                <a href="./index.html">首页</a>
              </li>
              <li class="">
                <a href="./getting-started.html">入门</a>
              </li>
              <li class="">
                <a href="./scaffolding.html">框架</a>
              </li>
              <li class="active">
                <a href="./base-css.html">基础CSS</a>
              </li>
              <li class="">
                <a href="./components.html">组件</a>
              </li>
              <li class="">
                <a href="./javascript.html">JavaScript</a>
              </li>
              <li class="">
                <a href="./customize.html">自定义</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
  <div class="container">
    <h1>基础 CSS</h1>
    <p class="lead">基本HTML元素的风格和可扩展的属性.</p>
  </div>
</header>


  <div class="container">

    <!-- Docs nav
    ================================================== -->
    <div class="row">
      <div class="span3 bs-docs-sidebar">
        <ul class="nav nav-list bs-docs-sidenav">
          <li><a href="#typography"><i class="icon-chevron-right"></i> 排版</a></li>
          <li><a href="#code"><i class="icon-chevron-right"></i> 代码</a></li>
          <li><a href="#tables"><i class="icon-chevron-right"></i> 表格</a></li>
          <li><a href="#forms"><i class="icon-chevron-right"></i> 表单</a></li>
          <li><a href="#buttons"><i class="icon-chevron-right"></i> 按钮</a></li>
          <li><a href="#images"><i class="icon-chevron-right"></i> 图像</a></li>
          <li><a href="#icons"><i class="icon-chevron-right"></i> Glyphicons图标</a></li>
        </ul>
      </div>
      <div class="span9">



        <!-- Typography
        ================================================== -->
        <section id="typography">
          <div class="page-header">
            <h1>排版</h1>
          </div>

          <h2 id="headings">标题</h2>
          <p>从 <code>&lt;h1&gt;</code> 到 <code>&lt;h6&gt;</code> 所有的HTML标题.</p>
          <div class="bs-docs-example">
            <h1>h1. Heading 1</h1>
            <h2>h2. Heading 2</h2>
            <h3>h3. Heading 3</h3>
            <h4>h4. Heading 4</h4>
            <h5>h5. Heading 5</h5>
            <h6>h6. Heading 6</h6>
          </div>

          <h2 id="body-copy">Body copy</h2>
          <p>Bootstrap的全局设置默认 <code>font-size</code> 为 <strong>14px</strong>, <code>line-height</code> 为 <strong>20px</strong>. 这应用在 <code>&lt;body&gt;</code> 和所有段落. 此外, <code>&lt;p&gt;</code> (段落) 里的行与行间隙为line-height的一半 (即默认10px).</p>
          <div class="bs-docs-example">
            <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
            <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
          </div>
          <pre class="prettyprint">&lt;p&gt;...&lt;/p&gt;</pre>

          <h3>Lead body copy</h3>
          <p>突出一个段落只需加 <code>.lead</code>.</p>
          <div class="bs-docs-example">
            <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
          </div>
          <pre class="prettyprint">&lt;p class="lead"&gt;...&lt;/p&gt;</pre>

          <h3>构建在Less</h3>
          <p>排版的尺寸大小在<strong>variables.less</strong>这2个LESS变量: <code>@baseFontSize</code> and <code>@baseLineHeight</code>的基础上. 第一个是贯穿整个font-size, 第二个是line-heightThe. 我们使用这些变量和一些简单的数值来创建margin, padding, 和 line-height 等等类型.</p>


          <hr class="bs-docs-separator">


          <h2 id="emphasis">强调</h2>
          <p>这里使用了HTML默认的轻量级风格的强调标签.</p>

          <h3><code>&lt;small&gt;</code></h3>
          <p>强调内嵌和文本块, <small>使用小标签.</small></p>
          <div class="bs-docs-example">
            <p><small>This line of text is meant to be treated as fine print.</small></p>
          </div>
<pre class="prettyprint">
&lt;p&gt;
  &lt;small&gt;This line of text is meant to be treated as fine print.&lt;/small&gt;
&lt;/p&gt;
</pre>

          <h3>加粗</h3>
          <p>用font-weight强调一小段文字.</p>
          <div class="bs-docs-example">
            <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
          </div>
          <pre class="prettyprint">&lt;strong&gt;rendered as bold text&lt;/strong&gt;</pre>

          <h3>斜体</h3>
          <p>用 斜体 强调一小段文字.</p>
          <div class="bs-docs-example">
            <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
          </div>
          <pre class="prettyprint">&lt;em&gt;rendered as italicized text&lt;/em&gt;</pre>

          <p><span class="label label-info">注意!</span> 在HTML5可随意使用 <code>&lt;b&gt;</code> 和 <code>&lt;i&gt;</code> . <code>&lt;b&gt;</code> 是为了突出词或短语, 而不会有其他重要含义, 而 <code>&lt;i&gt;</code> 提供主要是语态, 专业术语等含义.</p>

          <h3>对齐</h3>
          <p>简单方便将文字对齐的属性.</p>
          <div class="bs-docs-example">
            <p class="text-left">居左文字.</p>
            <p class="text-center">居中文字.</p>
            <p class="text-right">居右文字.</p>
          </div>
<pre class="prettyprint linenums">
&lt;p class="text-left"&gt;居左文字.&lt;/p&gt;
&lt;p class="text-center"&gt;居中文字.&lt;/p&gt;
&lt;p class="text-right"&gt;居右文字.&lt;/p&gt;
</pre>

          <h3>强调的属性</h3>
          <p>通过一些颜色来强调.</p>
          <div class="bs-docs-example">
            <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
            <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
            <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
            <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
            <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
          </div>
<pre class="prettyprint linenums">
&lt;p class="muted"&gt;Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.&lt;/p&gt;
&lt;p class="text-warning"&gt;Etiam porta sem malesuada magna mollis euismod.&lt;/p&gt;
&lt;p class="text-error"&gt;Donec ullamcorper nulla non metus auctor fringilla.&lt;/p&gt;
&lt;p class="text-info"&gt;Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.&lt;/p&gt;
&lt;p class="text-success"&gt;Duis mollis, est non commodo luctus, nisi erat porttitor ligula.&lt;/p&gt;
</pre>


          <hr class="bs-docs-separator">


          <h2 id="abbreviations">缩写</h2>
          <p>参照在鼠标悬停在缩写和缩写词就显示完整内容的HTML<code>&lt;abbr&gt;</code> 元素. abbr元素带有 <code>title</code> 属性之后缩写部分的底部会有一条虚线, 并且鼠标悬停在上面会有一个“帮助”符号, 同时还会显示title所提供的内容.</p>

          <h3><code>&lt;abbr&gt;</code></h3>
          <p>如想看完整文字可把鼠标悬停在缩写词, 但需要包含 <code>title</code> 属性.</p>
          <div class="bs-docs-example">
            <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
          </div>
          <pre class="prettyprint">&lt;abbr title="attribute"&gt;attr&lt;/abbr&gt;</pre>

          <h3><code>&lt;abbr class="initialism"&gt;</code></h3>
          <p>如果要缩小缩写词字体大小, 可添加 <code>.initialism</code> .</p>
          <div class="bs-docs-example">
            <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
          </div>
          <pre class="prettyprint">&lt;abbr title="HyperText Markup Language" class="initialism"&gt;HTML&lt;/abbr&gt;</pre>


          <hr class="bs-docs-separator">


          <h2 id="addresses">地址</h2>
          <p>让联系信息最接近原始格式的形式呈现.</p>

          <h3><code>&lt;address&gt;</code></h3>
          <p>换行使用 <code>&lt;br&gt;</code>.</p>
          <div class="bs-docs-example">
            <address>
              <strong>Twitter, Inc.</strong><br>
              795 Folsom Ave, Suite 600<br>
              San Francisco, CA 94107<br>
              <abbr title="Phone">P:</abbr> (123) 456-7890
            </address>
            <address>
              <strong>Full Name</strong><br>
              <a href="mailto:#">first.last@example.com</a>
            </address>
          </div>
<pre class="prettyprint linenums">
&lt;address&gt;
  &lt;strong&gt;Twitter, Inc.&lt;/strong&gt;&lt;br&gt;
  795 Folsom Ave, Suite 600&lt;br&gt;
  San Francisco, CA 94107&lt;br&gt;
  &lt;abbr title="Phone"&gt;P:&lt;/abbr&gt; (123) 456-7890
&lt;/address&gt;

&lt;address&gt;
  &lt;strong&gt;Full Name&lt;/strong&gt;&lt;br&gt;
  &lt;a href="mailto:#"&gt;first.last@example.com&lt;/a&gt;
&lt;/address&gt;
</pre>


          <hr class="bs-docs-separator">


          <h2 id="blockquotes">引用</h2>
          <p>在你的文档中引用其他来源的内容.</p>

          <h3>默认</h3>
          <p>把任何 <abbr title="超文本标记语言">HTML</abbr> 嵌套在 <code>&lt;blockquote&gt;</code> 里面即可. 对于直接的引用, 我们建议使用 <code>&lt;p&gt;</code>.</p>
          <div class="bs-docs-example">
            <blockquote>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            </blockquote>
          </div>
<pre class="prettyprint linenums">
&lt;blockquote&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;/p&gt;
&lt;/blockquote&gt;
</pre>

          <h3>选项</h3>
          <p>在标准的引用里, 可以很简单的改变风格和内容.</p>

          <h4>标出来源</h4>
          <p>添加 <code>&lt;small&gt;</code> 标签来注明引用的来源. 来源标题可以放在 <code>&lt;cite&gt;</code> 标签里面.</p>
          <div class="bs-docs-example">
            <blockquote>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
            </blockquote>
          </div>
<pre class="prettyprint linenums">
&lt;blockquote&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;/p&gt;
  &lt;small&gt;Someone famous &lt;cite title="Source Title"&gt;Source Title&lt;/cite&gt;&lt;/small&gt;
&lt;/blockquote&gt;
</pre>

          <h4>其他</h4>
          <p>使用 <code>.pull-right</code> 属性, 可以让引用向右靠齐.</p>
          <div class="bs-docs-example" style="overflow: hidden;">
            <blockquote class="pull-right">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
            </blockquote>
          </div>
<pre class="prettyprint linenums">
&lt;blockquote class="pull-right"&gt;
  ...
&lt;/blockquote&gt;
</pre>


          <hr class="bs-docs-separator">


          <!-- Lists -->
          <h2 id="lists">列表</h2>

          <h3>无序列表</h3>
          <p>用于<em>没有</em>明确信息的列表.</p>
          <div class="bs-docs-example">
            <ul>
              <li>Lorem ipsum dolor sit amet</li>
              <li>Consectetur adipiscing elit</li>
              <li>Integer molestie lorem at massa</li>
              <li>Facilisis in pretium nisl aliquet</li>
              <li>Nulla volutpat aliquam velit
                <ul>
                  <li>Phasellus iaculis neque</li>
                  <li>Purus sodales ultricies</li>
                  <li>Vestibulum laoreet porttitor sem</li>
                  <li>Ac tristique libero volutpat at</li>
                </ul>
              </li>
              <li>Faucibus porta lacus fringilla vel</li>
              <li>Aenean sit amet erat nunc</li>
              <li>Eget porttitor lorem</li>
            </ul>
          </div>
<pre class="prettyprint linenums">
&lt;ul&gt;
  &lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;
</pre>

          <h3>有序列表</h3>
          <p>用于<em>有</em>明确或需按序号排序的信息的列表.</p>
          <div class="bs-docs-example">
            <ol>
              <li>Lorem ipsum dolor sit amet</li>
              <li>Consectetur adipiscing elit</li>
              <li>Integer molestie lorem at massa</li>
              <li>Facilisis in pretium nisl aliquet</li>
              <li>Nulla volutpat aliquam velit</li>
              <li>Faucibus porta lacus fringilla vel</li>
              <li>Aenean sit amet erat nunc</li>
              <li>Eget porttitor lorem</li>
            </ol>
          </div>
<pre class="prettyprint linenums">
&lt;ol&gt;
  &lt;li&gt;...&lt;/li&gt;
&lt;/ol&gt;
</pre>

        <h3>无样式列表</h3>
        <p>移除了默认的<code>list-style</code>, 并左填充列表(只对子节点项有效).</p>
        <div class="bs-docs-example">
          <ul class="unstyled">
            <li>Lorem ipsum dolor sit amet</li>
            <li>Consectetur adipiscing elit</li>
            <li>Integer molestie lorem at massa</li>
            <li>Facilisis in pretium nisl aliquet</li>
            <li>Nulla volutpat aliquam velit
              <ul>
                <li>Phasellus iaculis neque</li>
                <li>Purus sodales ultricies</li>
                <li>Vestibulum laoreet porttitor sem</li>
                <li>Ac tristique libero volutpat at</li>
              </ul>
            </li>
            <li>Faucibus porta lacus fringilla vel</li>
            <li>Aenean sit amet erat nunc</li>
            <li>Eget porttitor lorem</li>
          </ul>
        </div>
<pre class="prettyprint linenums">
&lt;ul class="unstyled"&gt;
  &lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;
</pre>

        <h3>水平列表</h3>
        <p>使用 <code>inline-block</code> 让列表项水平排列一行, 同时每项都有一定的间距.</p>
        <div class="bs-docs-example">
          <ul class="inline">
            <li>Lorem ipsum</li>
            <li>Phasellus iaculis</li>
            <li>Nulla volutpat</li>
          </ul>
        </div>
<pre class="prettyprint linenums">
&lt;ul class="inline"&gt;
  &lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;
</pre>

        <h3>描述</h3>
        <p>对一个(条款)列表进行关联描述.</p>
        <div class="bs-docs-example">
          <dl>
            <dt>Description lists</dt>
            <dd>A description list is perfect for defining terms.</dd>
            <dt>Euismod</dt>
            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
            <dd>Donec id elit non mi porta gravida at eget metus.</dd>
            <dt>Malesuada porta</dt>
            <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
          </dl>
        </div>
<pre class="prettyprint linenums">
&lt;dl&gt;
  &lt;dt&gt;...&lt;/dt&gt;
  &lt;dd&gt;...&lt;/dd&gt;
&lt;/dl&gt;
</pre>

        <h4>横向描述</h4>
        <p>使用<code>&lt;dl&gt;</code>把列表和对其的描述一对一横向显示.</p>
        <div class="bs-docs-example">
          <dl class="dl-horizontal">
            <dt>Description lists</dt>
            <dd>A description list is perfect for defining terms.</dd>
            <dt>Euismod</dt>
            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
            <dd>Donec id elit non mi porta gravida at eget metus.</dd>
            <dt>Malesuada porta</dt>
            <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
            <dt>Felis euismod semper eget lacinia</dt>
            <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
          </dl>
        </div>
<pre class="prettyprint linenums">
&lt;dl class="dl-horizontal"&gt;
  &lt;dt&gt;...&lt;/dt&gt;
  &lt;dd&gt;...&lt;/dd&gt;
&lt;/dl&gt;
</pre>
        <p>
          <span class="label label-info">注意!</span>
          横向描述通过<code>text-overflow</code>会对过长而无法在左栏中完全显示的列名截断掉一部分. 而在较窄的视口(宽度)中, 会改变成垂直(形式)表述, 来适应当前屏幕.
        </p>
      </section>



        <!-- Code
        ================================================== -->
        <section id="code">
          <div class="page-header">
            <h1>代码</h1>
          </div>

          <h2>内嵌</h2>
          <p>把一小段代码内嵌到 <code>&lt;code&gt;</code> 标签.</p>
<div class="bs-docs-example">
  For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
<pre class="prettyprint linenums">
For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped as inline.
</pre>

          <h2>基本块</h2>
          <p>使用 <code>&lt;pre&gt;</code> 放入多行代码. 为了能正确渲染, 在代码中一定要避免使用任何尖括号.</p>
<div class="bs-docs-example">
  <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
</div>
<pre class="prettyprint linenums" style="margin-bottom: 9px;">
&lt;pre&gt;
  &amp;lt;p&amp;gt;Sample text here...&amp;lt;/p&amp;gt;
&lt;/pre&gt;
</pre>
          <p><span class="label label-info">注意!</span> 因为在 <code>&lt;pre&gt;</code> 标签里, tab会被算进去, 所以要保持代码尽可能的靠左侧.</p>
          <p>你也可以添加 <code>.pre-scrollable</code> 把该区域设置成最大高度为350px并带有一个Y轴滚动条.</p>
        </section>



        <!-- Tables
        ================================================== -->
        <section id="tables">
          <div class="page-header">
            <h1>表格</h1>
          </div>

          <h2>默认的样式</h2>
          <p>基本 styling&mdash;light padding 和 水平分隔符 &mdash; 在任意 <code>&lt;table&gt;</code> 添加 <code>.table</code> 即可.</p>
          <div class="bs-docs-example">
            <table class="table">
              <thead>
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Larry</td>
                  <td>the Bird</td>
                  <td>@twitter</td>
                </tr>
              </tbody>
            </table>
          </div>
<pre class="prettyprint linenums">
&lt;table class="table"&gt;
  …
&lt;/table&gt;
</pre>


          <hr class="bs-docs-separator">


          <h2>可选属性</h2>
          <p>可在 <code>.table</code> 添加以下任何属性.</p>

          <h3><code>.table-striped</code></h3>
          <p>在 <code>&lt;tbody&gt;</code> 行内, 通过<code>:nth-child</code> CSS选择器(不支持IE7-8)添加条纹状.</p>
          <div class="bs-docs-example">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Larry</td>
                  <td>the Bird</td>
                  <td>@twitter</td>
                </tr>
              </tbody>
            </table>
          </div>
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
&lt;table class="table table-striped"&gt;
  …
&lt;/table&gt;
</pre>

          <h3><code>.table-bordered</code></h3>
          <p>添加边框和圆角.</p>
          <div class="bs-docs-example">
            <table class="table table-bordered">
              <thead>
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td rowspan="2">1</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@TwBootstrap</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td colspan="2">Larry the Bird</td>
                  <td>@twitter</td>
                </tr>
              </tbody>
            </table>
          </div>
<pre class="prettyprint linenums">
&lt;table class="table table-bordered"&gt;
  …
&lt;/table&gt;
</pre>

          <h3><code>.table-hover</code></h3>
          <p>在 <code>&lt;tbody&gt;</code> 内使用停悬效果.</p>
          <div class="bs-docs-example">
            <table class="table table-hover">
              <thead>
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td colspan="2">Larry the Bird</td>
                  <td>@twitter</td>
                </tr>
              </tbody>
            </table>
          </div>
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
&lt;table class="table table-hover"&gt;
  …
&lt;/table&gt;
</pre>

          <h3><code>.table-condensed</code></h3>
          <p>单元格padding减半, 让表格更加紧凑.</p>
          <div class="bs-docs-example">
            <table class="table table-condensed">
              <thead>
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td colspan="2">Larry the Bird</td>
                  <td>@twitter</td>
                </tr>
              </tbody>
            </table>
          </div>
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
&lt;table class="table table-condensed"&gt;
  …
&lt;/table&gt;
</pre>


          <hr class="bs-docs-separator">


          <h2>可选的行属性</h2>
          <p>使用情景(contextual)属性在表格中添加颜色.</p>
          <table class="table table-bordered table-striped">
            <colgroup>
              <col class="span1">
              <col class="span7">
            </colgroup>
            <thead>
              <tr>
                <th>属性</th>
                <th>描述</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <code>.success</code>
                </td>
                <td>表示成功或积极的行为.</td>
              </tr>
              <tr>
                <td>
                  <code>.error</code>
                </td>
                <td>表示一个危险或存有潜在危险的作用.</td>
              </tr>
              <tr>
                <td>
                  <code>.warning</code>
                </td>
                <td>表示警告, 可能需要注意的作用.</td>
              </tr>
              <tr>
                <td>
                  <code>.info</code>
                </td>
                <td>作为一个信息的默认样式.</td>
              </tr>
            </tbody>
          </table>
          <div class="bs-docs-example">
            <table class="table">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Product</th>
                  <th>Payment Taken</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                <tr class="success">
                  <td>1</td>
                  <td>TB - Monthly</td>
                  <td>01/04/2012</td>
                  <td>Approved</td>
                </tr>
                <tr class="error">
                  <td>2</td>
                  <td>TB - Monthly</td>
                  <td>02/04/2012</td>
                  <td>Declined</td>
                </tr>
                <tr class="warning">
                  <td>3</td>
                  <td>TB - Monthly</td>
                  <td>03/04/2012</td>
                  <td>Pending</td>
                </tr>
                <tr class="info">
                  <td>4</td>
                  <td>TB - Monthly</td>
                  <td>04/04/2012</td>
                  <td>Call in to confirm</td>
                </tr>
              </tbody>
            </table>
          </div>
<pre class="prettyprint linenums">
...
  &lt;tr class="success"&gt;
    &lt;td&gt;1&lt;/td&gt;
    &lt;td&gt;TB - Monthly&lt;/td&gt;
    &lt;td&gt;01/04/2012&lt;/td&gt;
    &lt;td&gt;Approved&lt;/td&gt;
  &lt;/tr&gt;
...
</pre>


          <hr class="bs-docs-separator">


          <h2>表格支持的标记</h2>
          <p>下表是表格支持的HTML元素以及应该如何使用它们.</p>
          <table class="table table-bordered table-striped">
            <colgroup>
              <col class="span1">
              <col class="span7">
            </colgroup>
            <thead>
              <tr>
                <th>标签</th>
                <th>描述</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <code>&lt;table&gt;</code>
                </td>
                <td>
                  以表格形式显示数据的包装元素
                </td>
              </tr>
              <tr>
                <td>
                  <code>&lt;thead&gt;</code>
                </td>
                <td>
                  表头行标签(<code>&lt;tr&gt;</code>)
                </td>
              </tr>
              <tr>
                <td>
                  <code>&lt;tbody&gt;</code>
                </td>
                <td>
                  表格的内容行(<code>&lt;tr&gt;</code>)
                </td>
              </tr>
              <tr>
                <td>
                  <code>&lt;tr&gt;</code>
                </td>
                <td>
                  在单行设置一组单元格(<code>&lt;td&gt;</code> or <code>&lt;th&gt;</code>)
                </td>
              </tr>
              <tr>
                <td>
                  <code>&lt;td&gt;</code>
                </td>
                <td>
                  默认的表格单元格
                </td>
              </tr>
              <tr>
                <td>
                  <code>&lt;th&gt;</code>
                </td>
                <td>
                  列标签的特殊单元格(或行, 这取决于范围和位置)
                </td>
              </tr>
              <tr>
                <td>
                  <code>&lt;caption&gt;</code>
                </td>
                <td>
                  用于对表的描述或总结, 对屏幕阅读器特别有用.
                </td>
              </tr>
            </tbody>
          </table>
<pre class="prettyprint linenums">
&lt;table&gt;
  &lt;caption&gt;...&lt;/caption&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;...&lt;/th&gt;
      &lt;th&gt;...&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;...&lt;/td&gt;
      &lt;td&gt;...&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
</pre>

        </section>



        <!-- Forms
        ================================================== -->
        <section id="forms">
          <div class="page-header">
            <h1>表单</h1>
          </div>

          <h2>默认样式</h2>
          <p>单个表单控件的样式, 但在<code>&lt;form&gt;</code>没有包含任何属性或有大的变化标记. 在上下堆叠的结果是表单控件中的标签为左对齐.</p>
          <form class="bs-docs-example">
            <fieldset>
              <legend>Legend</legend>
              <label>Label name</label>
              <input type="text" placeholder="Type something…">
              <span class="help-block">Example block-level help text here.</span>
              <label class="checkbox">
                <input type="checkbox"> Check me out
              </label>
              <button type="submit" class="btn">Submit</button>
            </fieldset>
          </form>
<pre class="prettyprint linenums">
&lt;form&gt;
  &lt;fieldset&gt;
    &lt;legend&gt;Legend&lt;/legend&gt;
    &lt;label&gt;Label name&lt;/label&gt;
    &lt;input type="text" placeholder="Type something…"&gt;
    &lt;span class="help-block"&gt;Example block-level help text here.&lt;/span&gt;
    &lt;label class="checkbox"&gt;
      &lt;input type="checkbox"&gt; Check me out
    &lt;/label&gt;
    &lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;
</pre>


          <hr class="bs-docs-separator">


          <h2>可选布局</h2>
          <p>Bootstrap包含3个常用的表单布局.</p>

          <h3>搜索表单</h3>
          <p>在表单添加 <code>.form-search</code> 和 在 <code>&lt;input&gt;</code> 添加 <code>.search-query</code> 可为输入框提供一个额外的圆角.</p>
          <form class="bs-docs-example form-search">
            <input type="text" class="input-medium search-query">
            <button type="submit" class="btn">Search</button>
          </form>
<pre class="prettyprint linenums">
&lt;form class="form-search"&gt;
  &lt;input type="text" class="input-medium search-query"&gt;
  &lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
&lt;/form&gt;
</pre>

          <h3>水平表单</h3>
          <p>添加 <code>.form-inline</code> 使标签左对齐, 以及通过inline-block控制一个紧凑的布局.</p>
          <form class="bs-docs-example form-inline">
            <input type="text" class="input-small" placeholder="Email">
            <input type="password" class="input-small" placeholder="Password">
            <label class="checkbox">
              <input type="checkbox"> Remember me
            </label>
            <button type="submit" class="btn">Sign in</button>
          </form>
<pre class="prettyprint linenums">
&lt;form class="form-inline"&gt;
  &lt;input type="text" class="input-small" placeholder="Email"&gt;
  &lt;input type="password" class="input-small" placeholder="Password"&gt;
  &lt;label class="checkbox"&gt;
    &lt;input type="checkbox"&gt; Remember me
  &lt;/label&gt;
  &lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt;
&lt;/form&gt;
</pre>

          <h3>行表单</h3>
          <p>右对齐的标签和左浮动, 使它们在同一行一一对照. 需要从默认的表格中改动一些的标记:</p>
          <ul>
            <li>在表格添加 <code>.form-horizontal</code></li>
            <li>把标签和控件包含在 <code>.control-group</code></li>
            <li>在标签添加 <code>.control-label</code></li>
            <li>为任何关联的控件添加 <code>.controls</code> 来确保位置正确</li>
          </ul>
          <form class="bs-docs-example form-horizontal">
            <div class="control-group">
              <label class="control-label" for="inputEmail">Email</label>
              <div class="controls">
                <input type="text" id="inputEmail" placeholder="Email">
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" for="inputPassword">Password</label>
              <div class="controls">
                <input type="password" id="inputPassword" placeholder="Password">
              </div>
            </div>
            <div class="control-group">
              <div class="controls">
                <label class="checkbox">
                  <input type="checkbox"> Remember me
                </label>
                <button type="submit" class="btn">Sign in</button>
              </div>
            </div>
          </form>
<pre class="prettyprint linenums">
&lt;form class="form-horizontal"&gt;
  &lt;div class="control-group"&gt;
    &lt;label class="control-label" for="inputEmail"&gt;Email&lt;/label&gt;
    &lt;div class="controls"&gt;
      &lt;input type="text" id="inputEmail" placeholder="Email"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="control-group"&gt;
    &lt;label class="control-label" for="inputPassword"&gt;Password&lt;/label&gt;
    &lt;div class="controls"&gt;
      &lt;input type="password" id="inputPassword" placeholder="Password"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="control-group"&gt;
    &lt;div class="controls"&gt;
      &lt;label class="checkbox"&gt;
        &lt;input type="checkbox"&gt; Remember me
      &lt;/label&gt;
      &lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/form&gt;
</pre>


          <hr class="bs-docs-separator">


          <h2>支持的表单控件</h2>
          <p>控件例子.</p>

          <h3>输入框</h3>
          <p>最常见的表单控件, 基于文本输入字段. 支持包含HTML5在内的所有类型: 文本, 密码, 日期时间, 本地日期时间, 日期, 月, 时间, 星期, 数字, E-mail, url, 搜索, 电话, 和颜色.</p>
          <p>在任何时候都需要指定<code>type</code>.</p>
          <form class="bs-docs-example form-inline">
            <input type="text" placeholder="Text input">
          </form>
<pre class="prettyprint linenums">
&lt;input type="text" placeholder="Text input"&gt;
</pre>

          <h3>文本域</h3>
          <p>表单控件支持多行的文本. 根据需要可改变 <code>rows</code> 属性.</p>
          <form class="bs-docs-example form-inline">
            <textarea rows="3"></textarea>
          </form>
<pre class="prettyprint linenums">
&lt;textarea rows="3"&gt;&lt;/textarea&gt;
</pre>

          <h3>复选框和单选框</h3>
          <p>复选框是用于在一个列表中选择一个或多个选项, 而单选框是在众多选择中选择一个选项.</p>
          <h4>默认 (上下摆放)</h4>
          <form class="bs-docs-example">
            <label class="checkbox">
              <input type="checkbox" value="">
              Option one is this and that&mdash;be sure to include why it's great
            </label>
            <br>
            <label class="radio">
              <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
              Option one is this and that&mdash;be sure to include why it's great
            </label>
            <label class="radio">
              <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
              Option two can be something else and selecting it will deselect option one
            </label>
          </form>
<pre class="prettyprint linenums">
&lt;label class="checkbox"&gt;
  &lt;input type="checkbox" value=""&gt;
  Option one is this and that&mdash;be sure to include why it's great
&lt;/label&gt;

&lt;label class="radio"&gt;
  &lt;input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked&gt;
  Option one is this and that&mdash;be sure to include why it's great
&lt;/label&gt;
&lt;label class="radio"&gt;
  &lt;input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"&gt;
  Option two can be something else and selecting it will deselect option one
&lt;/label&gt;
</pre>

          <h4>水平复选框</h4>
          <p>在复选框或单选框添加 <code>.inline</code> 属性, 使它们在同一行显示.</p>
          <form class="bs-docs-example">
            <label class="checkbox inline">
              <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
            </label>
            <label class="checkbox inline">
              <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
            </label>
            <label class="checkbox inline">
              <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
            </label>
          </form>
<pre class="prettyprint linenums">
&lt;label class="checkbox inline"&gt;
  &lt;input type="checkbox" id="inlineCheckbox1" value="option1"&gt; 1
&lt;/label&gt;
&lt;label class="checkbox inline"&gt;
  &lt;input type="checkbox" id="inlineCheckbox2" value="option2"&gt; 2
&lt;/label&gt;
&lt;label class="checkbox inline"&gt;
  &lt;input type="checkbox" id="inlineCheckbox3" value="option3"&gt; 3
&lt;/label&gt;
</pre>

          <h3>下拉框</h3>
          <p>使用默认的选项或者指定 <code>multiple="multiple"</code> 一次显示多个选项.</p>
          <form class="bs-docs-example">
            <select>
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
            <br>
            <select multiple="multiple">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </form>
<pre class="prettyprint linenums">
&lt;select&gt;
  &lt;option&gt;1&lt;/option&gt;
  &lt;option&gt;2&lt;/option&gt;
  &lt;option&gt;3&lt;/option&gt;
  &lt;option&gt;4&lt;/option&gt;
  &lt;option&gt;5&lt;/option&gt;
&lt;/select&gt;

&lt;select multiple="multiple"&gt;
  &lt;option&gt;1&lt;/option&gt;
  &lt;option&gt;2&lt;/option&gt;
  &lt;option&gt;3&lt;/option&gt;
  &lt;option&gt;4&lt;/option&gt;
  &lt;option&gt;5&lt;/option&gt;
&lt;/select&gt;
</pre>


          <hr class="bs-docs-separator">


          <h2>扩展的表单控件</h2>
          <p>在现有的浏览器添加控件, Bootstrap包含其他有用的表单组件.</p>

          <h3>前缀和附加输入</h3>
          <p>在任何文本输入框的基础上, 前或后添加一个文本或按钮. 注意, 不支持<code>select</code> 元素.</p>

          <h4>默认选项</h4>
          <p>把 <code>.add-on</code> 放在一个 <code>input</code> 前面或后面.</p>
          <form class="bs-docs-example">
            <div class="input-prepend">
              <span class="add-on">@</span>
              <input class="span2" id="prependedInput" type="text" placeholder="Username">
            </div>
            <br>
            <div class="input-append">
              <input class="span2" id="appendedInput" type="text">
              <span class="add-on">.00</span>
            </div>
          </form>
<pre class="prettyprint linenums">
&lt;div class="input-prepend"&gt;
  &lt;span class="add-on"&gt;@&lt;/span&gt;
  &lt;input class="span2" id="prependedInput" type="text" placeholder="Username"&gt;
&lt;/div&gt;
&lt;div class="input-append"&gt;
  &lt;input class="span2" id="appendedInput" type="text"&gt;
  &lt;span class="add-on"&gt;.00&lt;/span&gt;
&lt;/div&gt;
</pre>

          <h4>结合</h4>
          <p>使用2个<code>.add-on</code>, 让输入框拥有前缀和后面附加内容.</p>
          <form class="bs-docs-example form-inline">
            <div class="input-prepend input-append">
              <span class="add-on">$</span>
              <input class="span2" id="appendedPrependedInput" type="text">
              <span class="add-on">.00</span>
            </div>
          </form>
<pre class="prettyprint linenums">
&lt;div class="input-prepend input-append"&gt;
  &lt;span class="add-on"&gt;$&lt;/span&gt;
  &lt;input class="span2" id="appendedPrependedInput" type="text"&gt;
  &lt;span class="add-on"&gt;.00&lt;/span&gt;
&lt;/div&gt;
</pre>

          <h4>按钮代替文本</h4>
          <p>使用 <code>.btn</code> 附加一个(或两个)按钮, 代替 <code>&lt;span&gt;</code> 的文本.</p>
          <form class="bs-docs-example">
            <div class="input-append">
              <input class="span2" id="appendedInputButton" type="text">
              <button class="btn" type="button">Go!</button>
            </div>
          </form>
<pre class="prettyprint linenums">
&lt;div class="input-append"&gt;
  &lt;input class="span2" id="appendedInputButton" type="text"&gt;
  &lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
&lt;/div&gt;
</pre>
          <form class="bs-docs-example">
            <div class="input-append">
              <input class="span2" id="appendedInputButtons" type="text">
              <button class="btn" type="button">搜索</button>
              <button class="btn" type="button">选项</button>
            </div>
          </form>
<pre class="prettyprint linenums">
&lt;div class="input-append"&gt;
  &lt;input class="span2" id="appendedInputButtons" type="text"&gt;
  &lt;button class="btn" type="button"&gt;搜索&lt;/button&gt;
  &lt;button class="btn" type="button"&gt;选项&lt;/button&gt;
&lt;/div&gt;
</pre>

          <h4>按钮式下拉菜单</h4>
          <p></p>
          <form class="bs-docs-example">
            <div class="input-append">
              <input class="span2" id="appendedDropdownButton" type="text">
              <div class="btn-group">
                <button class="btn dropdown-toggle" data-toggle="dropdown">行为 <span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">行为</a></li>
                  <li><a href="#">其他行为</a></li>
                  <li><a href="#">特别行为</a></li>
                  <li class="divider"></li>
                  <li><a href="#">分割链接</a></li>
                </ul>
              </div><!-- /btn-group -->
            </div><!-- /input-append -->
          </form>
<pre class="prettyprint linenums">
&lt;div class="input-append"&gt;
  &lt;input class="span2" id="appendedDropdownButton" type="text"&gt;
  &lt;div class="btn-group"&gt;
    &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
      Action
      &lt;span class="caret"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;ul class="dropdown-menu"&gt;
      ...
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>

          <form class="bs-docs-example">
            <div class="input-prepend">
              <div class="btn-group">
                <button class="btn dropdown-toggle" data-toggle="dropdown">行为 <span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">行为</a></li>
                  <li><a href="#">其他行为</a></li>
                  <li><a href="#">特别行为</a></li>
                  <li class="divider"></li>
                  <li><a href="#">分割链接</a></li>
                </ul>
              </div><!-- /btn-group -->
              <input class="span2" id="prependedDropdownButton" type="text">
            </div><!-- /input-prepend -->
          </form>
<pre class="prettyprint linenums">
&lt;div class="input-prepend"&gt;
  &lt;div class="btn-group"&gt;
    &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
      Action
      &lt;span class="caret"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;ul class="dropdown-menu"&gt;
      ...
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;input class="span2" id="prependedDropdownButton" type="text"&gt;
&lt;/div&gt;
</pre>

          <form class="bs-docs-example">
            <div class="input-prepend input-append">
              <div class="btn-group">
                <button class="btn dropdown-toggle" data-toggle="dropdown">行为 <span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">行为</a></li>
                  <li><a href="#">其他行为</a></li>
                  <li><a href="#">特别行为</a></li>
                  <li class="divider"></li>
                  <li><a href="#">分割链接</a></li>
                </ul>
              </div><!-- /btn-group -->
              <input class="span2" id="appendedPrependedDropdownButton" type="text">
              <div class="btn-group">
                <button class="btn dropdown-toggle" data-toggle="dropdown">行为 <span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">行为</a></li>
                  <li><a href="#">其他行为</a></li>
                  <li><a href="#">特别行为</a></li>
                  <li class="divider"></li>
                  <li><a href="#">分割链接</a></li>
                </ul>
              </div><!-- /btn-group -->
            </div><!-- /input-prepend input-append -->
          </form>
<pre class="prettyprint linenums">
&lt;div class="input-prepend input-append"&gt;
  &lt;div class="btn-group"&gt;
    &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
      Action
      &lt;span class="caret"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;ul class="dropdown-menu"&gt;
      ...
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;input class="span2" id="appendedPrependedDropdownButton" type="text"&gt;
  &lt;div class="btn-group"&gt;
    &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
      Action
      &lt;span class="caret"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;ul class="dropdown-menu"&gt;
      ...
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>

          <h4>分段式下拉菜单</h4>
          <form class="bs-docs-example">
            <div class="input-prepend">
              <div class="btn-group">
                <button class="btn" tabindex="-1">行为</button>
                <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li><a href="#">行为</a></li>
                  <li><a href="#">其他行为</a></li>
                  <li><a href="#">特别行为</a></li>
                  <li class="divider"></li>
                  <li><a href="#">分割链接</a></li>
                </ul>
              </div>
              <input type="text">
            </div>
            <div class="input-append">
              <input type="text">
              <div class="btn-group">
                <button class="btn" tabindex="-1">行为</button>
                <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li><a href="#">行为</a></li>
                  <li><a href="#">其他行为</a></li>
                  <li><a href="#">特别行为</a></li>
                  <li class="divider"></li>
                  <li><a href="#">分割链接</a></li>
                </ul>
              </div>
            </div>
          </form>
<pre class="prettyprint linenums">
&lt;form&gt;
  &lt;div class="input-prepend"&gt;
    &lt;div class="btn-group"&gt;...&lt;/div&gt;
    &lt;input type="text"&gt;
  &lt;/div&gt;
  &lt;div class="input-append"&gt;
    &lt;input type="text"&gt;
    &lt;div class="btn-group"&gt;...&lt;/div&gt;
  &lt;/div&gt;
&lt;/form&gt;
</pre>

          <h4>搜索表单</h4>
          <form class="bs-docs-example form-search">
            <div class="input-append">
              <input type="text" class="span2 search-query">
              <button type="submit" class="btn">搜索</button>
            </div>
            <div class="input-prepend">
              <button type="submit" class="btn">搜索</button>
              <input type="text" class="span2 search-query">
            </div>
          </form>
<pre class="prettyprint linenums">
&lt;form class="form-search"&gt;
  &lt;div class="input-append"&gt;
    &lt;input type="text" class="span2 search-query"&gt;
    &lt;button type="submit" class="btn"&gt;搜索&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="input-prepend"&gt;
    &lt;button type="submit" class="btn"&gt;搜索&lt;/button&gt;
    &lt;input type="text" class="span2 search-query"&gt;
  &lt;/div&gt;
&lt;/form&gt;
</pre>

          <h3>控件大小</h3>
          <p>使用相对大小的属性, 例如<code>.input-large</code> 或者使用<code>.span*</code>属性, 使输入框适合网格列大小.</p>

          <h4>块级输入框</h4>
          <p>让 <code>&lt;input&gt;</code> 或 <code>&lt;textarea&gt;</code> 元素像一个块级元素.</p>
          <form class="bs-docs-example" style="padding-bottom: 15px;">
            <div class="controls">
              <input class="input-block-level" type="text" placeholder=".input-block-level">
            </div>
          </form>
<pre class="prettyprint linenums">
&lt;input class="input-block-level" type="text" placeholder=".input-block-level"&gt;
</pre>

          <h4>相对大小</h4>
          <form class="bs-docs-example" style="padding-bottom: 15px;">
            <div class="controls docs-input-sizes">
              <input class="input-mini" type="text" placeholder=".input-mini">
              <input class="input-small" type="text" placeholder=".input-small">
              <input class="input-medium" type="text" placeholder=".input-medium">
              <input class="input-large" type="text" placeholder=".input-large">
              <input class="input-xlarge" type="text" placeholder=".input-xlarge">
              <input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
            </div>
          </form>
<pre class="prettyprint linenums">
&lt;input class="input-mini" type="text" placeholder=".input-mini"&gt;
&lt;input class="input-small" type="text" placeholder=".input-small"&gt;
&lt;input class="input-medium" type="text" placeholder=".input-medium"&gt;
&lt;input class="input-large" type="text" placeholder=".input-large"&gt;
&lt;input class="input-xlarge" type="text" placeholder=".input-xlarge"&gt;
&lt;input class="input-xxlarge" type="text" placeholder=".input-xxlarge"&gt;
</pre>
          <p>
            <span class="label label-info">注意!</span> 在未来的版本中, 我们将会修改这些属性, 让按钮大小也使用类似属性. 例如, <code>.input-large</code> 将提高按钮的padding和字体大小.
          </p>

          <h4>网格列大小</h4>
          <p>使用 <code>.span1</code> 到 <code>.span12</code> 让输入框的大小和网格列一致.</p>
          <form class="bs-docs-example" style="padding-bottom: 15px;">
            <div class="controls docs-input-sizes">
              <input class="span1" type="text" placeholder=".span1">
              <input class="span2" type="text" placeholder=".span2">
              <input class="span3" type="text" placeholder=".span3">
              <select class="span1">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
              <select class="span2">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
              <select class="span3">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            </div>
          </form>
<pre class="prettyprint linenums">
&lt;input class="span1" type="text" placeholder=".span1"&gt;
&lt;input class="span2" type="text" placeholder=".span2"&gt;
&lt;input class="span3" type="text" placeholder=".span3"&gt;
&lt;select class="span1"&gt;
  ...
&lt;/select&gt;
&lt;select class="span2"&gt;
  ...
&lt;/select&gt;
&lt;select class="span3"&gt;
  ...
&lt;/select&gt;
</pre>

          <p>对于每行有多个输入框, <strong>使用 <code>.controls-row</code> 为输入框直接加入适当的间距</strong>. 通过浮动让输入框之间缩减一些空白, 设置适当的边距, 并清除浮动.</p>
          <form class="bs-docs-example" style="padding-bottom: 15px;">
            <div class="controls">
              <input class="span5" type="text" placeholder=".span5">
            </div>
            <div class="controls controls-row">
              <input class="span4" type="text" placeholder=".span4">
              <input class="span1" type="text" placeholder=".span1">
            </div>
            <div class="controls controls-row">
              <input class="span3" type="text" placeholder=".span3">
              <input class="span2" type="text" placeholder=".span2">
            </div>
            <div class="controls controls-row">
              <input class="span2" type="text" placeholder=".span2">
              <input class="span3" type="text" placeholder=".span3">
            </div>
            <div class="controls controls-row">
              <input class="span1" type="text" placeholder=".span1">
              <input class="span4" type="text" placeholder=".span4">
            </div>
          </form>
<pre class="prettyprint linenums">
&lt;div class="controls"&gt;
  &lt;input class="span5" type="text" placeholder=".span5"&gt;
&lt;/div&gt;
&lt;div class="controls controls-row"&gt;
  &lt;input class="span4" type="text" placeholder=".span4"&gt;
  &lt;input class="span1" type="text" placeholder=".span1"&gt;
&lt;/div&gt;
...
</pre>

          <h3>不可编辑的输入框</h3>
          <p>在表单呈现不可编辑的数据, 无需使用实际的表单标记.</p>
          <form class="bs-docs-example">
            <span class="input-xlarge uneditable-input">Some value here</span>
          </form>
<pre class="prettyprint linenums">
&lt;span class="input-xlarge uneditable-input"&gt;Some value here&lt;/span&gt;
</pre>

          <h3>表单行为</h3>
          <p>一组(按钮)行为放在表单尾部. 当放置在 <code>.form-actions</code>, 按钮会在表单里自动缩进.</p>
          <form class="bs-docs-example">
            <div class="form-actions">
              <button type="submit" class="btn btn-primary">保存</button>
              <button type="button" class="btn">取消</button>
            </div>
          </form>
<pre class="prettyprint linenums">
&lt;div class="form-actions"&gt;
  &lt;button type="submit" class="btn btn-primary"&gt;保存&lt;/button&gt;
  &lt;button type="button" class="btn"&gt;取消&lt;/button&gt;
&lt;/div&gt;
</pre>

          <h3>帮助文本</h3>
          <p>说明文字支持水平和块级显示.</p>
          <h4>水平</h4>
          <form class="bs-docs-example form-inline">
            <input type="text"> <span class="help-inline">请输入中文</span>
          </form>
<pre class="prettyprint linenums">
&lt;input type="text"&gt;&lt;span class="help-inline"&gt;请输入中文&lt;/span&gt;
</pre>

          <h4>块状</h4>
          <form class="bs-docs-example form-inline">
            <input type="text">
            <span class="help-block">帮助文本, 如文字过长, 可采用块级显示.</span>
          </form>
<pre class="prettyprint linenums">
&lt;input type="text"&gt;&lt;span class="help-block"&gt;帮助文本, 如文字过长, 可采用块级显示.&lt;/span&gt;
</pre>


          <hr class="bs-docs-separator">


          <h2>表单控件状态</h2>
          <p>在表单控件和标签通过基本的反馈状态给用户或者访客提供反馈.</p>

          <h3>输入焦点</h3>
          <p>我们在一些表单控件和<code>:focus</code>地方应用了<code>box-shadow</code>, 移除了默认的 <code>outline</code> 样式.</p>
          <form class="bs-docs-example form-inline">
            <input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused...">
          </form>
<pre class="prettyprint linenums">
&lt;input class="input-xlarge" id="focusedInput" type="text" value="This is focused..."&gt;
</pre>

          <h3>无效输入</h3>
          <p>该样式使用浏览器<code>:invalid</code>的风格. 指定一个<code>type</code>, 添加 <code>required</code> 属性. 如果字段不可用(或可用), 可以指定一个<code>pattern</code>.</p>
          <p>这个在Internet Explorer 7-9下不可用, 因为它们不支持CSS伪类选择器.</p>
          <form class="bs-docs-example form-inline">
            <input class="span3" type="email" placeholder="test@example.com" required>
          </form>
<pre class="prettyprint linenums">
&lt;input class="span3" type="email" required&gt;
</pre>

          <h3>不可输入的输入框</h3>
          <p>在输入框添加 <code>disabled</code> 属性, 会有一个稍微不同的外观, 并且防止用户输入.</p>
          <form class="bs-docs-example form-inline">
            <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
          </form>
<pre class="prettyprint linenums">
&lt;input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled&gt;
</pre>

          <h3>验证状态</h3>
          <p>Bootstrap包含了错误, 警告, 资料, 和成功信息的验证样式. 在 <code>.control-group</code> 添加适当的属性便可以使用.</p>

          <form class="bs-docs-example form-horizontal">
            <div class="control-group warning">
              <label class="control-label" for="inputWarning">警告</label>
              <div class="controls">
                <input type="text" id="inputWarning">
                <span class="help-inline">有问题</span>
              </div>
            </div>
            <div class="control-group error">
              <label class="control-label" for="inputError">出错</label>
              <div class="controls">
                <input type="text" id="inputError">
                <span class="help-inline">请修改错误</span>
              </div>
            </div>
            <div class="control-group info">
              <label class="control-label" for="inputInfo">资料</label>
              <div class="controls">
                <input type="text" id="inputInfo">
                <span class="help-inline">用户名已被使用</span>
              </div>
            </div>
            <div class="control-group success">
              <label class="control-label" for="inputSuccess">成功</label>
              <div class="controls">
                <input type="text" id="inputSuccess">
                <span class="help-inline">不错!</span>
              </div>
            </div>
          </form>
<pre class="prettyprint linenums">
&lt;div class="control-group warning"&gt;
  &lt;label class="control-label" for="inputWarning"&gt;警告&lt;/label&gt;
  &lt;div class="controls"&gt;
    &lt;input type="text" id="inputWarning"&gt;
    &lt;span class="help-inline"&gt;有问题&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class="control-group error"&gt;
  &lt;label class="control-label" for="inputError"&gt;出错&lt;/label&gt;
  &lt;div class="controls"&gt;
    &lt;input type="text" id="inputError"&gt;
    &lt;span class="help-inline"&gt;请修改错误&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class="control-group info"&gt;
  &lt;label class="control-label" for="inputInfo"&gt;资料&lt;/label&gt;
  &lt;div class="controls"&gt;
    &lt;input type="text" id="inputInfo"&gt;
    &lt;span class="help-inline"&gt;用户名已被使用&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class="control-group success"&gt;
  &lt;label class="control-label" for="inputSuccess"&gt;成功&lt;/label&gt;
  &lt;div class="controls"&gt;
    &lt;input type="text" id="inputSuccess"&gt;
    &lt;span class="help-inline"&gt;不错!&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>

        </section>



        <!-- Buttons
        ================================================== -->
        <section id="buttons">
          <div class="page-header">
            <h1>按钮</h1>
          </div>

          <h2>默认</h2>
          <p>按钮样式可应用于任何有 <code>.btn</code> 属性的按钮. 但是, 通常应用在 <code>&lt;a&gt;</code> 和 <code>&lt;button&gt;</code> 元素会有更好的渲染效果.</p>
          <table class="table table-bordered table-striped">
            <thead>
              <tr>
                <th>按钮</th>
                <th>class=""</th>
                <th>描述</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><button type="button" class="btn">默认</button></td>
                <td><code>btn</code></td>
                <td>标准的渐变灰色按钮</td>
              </tr>
              <tr>
                <td><button type="button" class="btn btn-primary">主要</button></td>
                <td><code>btn btn-primary</code></td>
                <td>提供额外的视觉感, 可在一系列的按钮中指出主要操作</td>
              </tr>
              <tr>
                <td><button type="button" class="btn btn-info">资料</button></td>
                <td><code>btn btn-info</code></td>
                <td>用作可替代默认样式</td>
              </tr>
              <tr>
                <td><button type="button" class="btn btn-success">成功</button></td>
                <td><code>btn btn-success</code></td>
                <td>表示一个成功或积极的行为</td>
              </tr>
              <tr>
                <td><button type="button" class="btn btn-warning">警告</button></td>
                <td><code>btn btn-warning</code></td>
                <td>表示应该谨慎采取这个动作</td>
              </tr>
              <tr>
                <td><button type="button" class="btn btn-danger">危险</button></td>
                <td><code>btn btn-danger</code></td>
                <td>表示这个动作危险或存在危险</td>
              </tr>
              <tr>
                <td><button type="button" class="btn btn-inverse">反向</button></td>
                <td><code>btn btn-inverse</code></td>
                <td>备用的暗灰色按钮, 不依赖于语义和用途</td>
              </tr>
              <tr>
                <td><button type="button" class="btn btn-link">链接</button></td>
                <td><code>btn btn-link</code></td>
                <td>简化一个按钮, 使它看起来像一个链接, 同时保持按钮的行为</td>
              </tr>
            </tbody>
          </table>

          <h4>浏览器兼容性</h4>
          <p>IE9不支持渐变背景, 所以我们将其删除. IE9 jankifies 禁用<code>button</code>元素, 文本会呈现灰色并带有一个令人讨厌的阴影, 此情况我们无法修复.</p>


          <h2>按钮大小</h2>
          <p>想使用更大或更小的按钮吗? 添加 <code>.btn-large</code>, <code>.btn-small</code>, 或 <code>.btn-mini</code> 即可改变按钮大小.</p>
          <div class="bs-docs-example">
            <p>
              <button type="button" class="btn btn-large btn-primary">大号按钮</button>
              <button type="button" class="btn btn-large">大号按钮</button>
            </p>
            <p>
              <button type="button" class="btn btn-primary">默认大小</button>
              <button type="button" class="btn">默认大小</button>
            </p>
            <p>
              <button type="button" class="btn btn-small btn-primary">小号按钮</button>
              <button type="button" class="btn btn-small">小号按钮</button>
            </p>
            <p>
              <button type="button" class="btn btn-mini btn-primary">迷你按钮</button>
              <button type="button" class="btn btn-mini">迷你按钮</button>
            </p>
          </div>
<pre class="prettyprint linenums">
&lt;p&gt;
  &lt;button class="btn btn-large btn-primary" type="button"&gt;大号按钮&lt;/button&gt;
  &lt;button class="btn btn-large" type="button"&gt;大号按钮&lt;/button&gt;
&lt;/p&gt;
&lt;p&gt;
  &lt;button class="btn btn-primary" type="button"&gt;默认大小&lt;/button&gt;
  &lt;button class="btn" type="button"&gt;默认大小&lt;/button&gt;
&lt;/p&gt;
&lt;p&gt;
  &lt;button class="btn btn-small btn-primary" type="button"&gt;小号按钮&lt;/button&gt;
  &lt;button class="btn btn-small" type="button"&gt;小号按钮&lt;/button&gt;
&lt;/p&gt;
&lt;p&gt;
  &lt;button class="btn btn-mini btn-primary" type="button"&gt;迷你按钮&lt;/button&gt;
  &lt;button class="btn btn-mini" type="button"&gt;迷你按钮&lt;/button&gt;
&lt;/p&gt;
</pre>
          <p>通过添加<code>.btn-block</code>创建块级按钮, 同时会填充整个父级的宽度.</p>
          <div class="bs-docs-example">
            <div class="well" style="max-width: 400px; margin: 0 auto 10px;">
              <button type="button" class="btn btn-large btn-block btn-primary">Block level button</button>
              <button type="button" class="btn btn-large btn-block">Block level button</button>
            </div>
          </div>
<pre class="prettyprint linenums">
&lt;button class="btn btn-large btn-block btn-primary" type="button"&gt;Block level button&lt;/button&gt;
&lt;button class="btn btn-large btn-block" type="button"&gt;Block level button&lt;/button&gt;
</pre>


          <h2>禁用状态</h2>
          <p>颜色淡出50%, 让按钮看起来无法点击.</p>

          <h3>链接元素</h3>
          <p>在<code>&lt;a&gt;</code>添加<code>.disabled</code>.</p>
          <p class="bs-docs-example">
            <a href="#" class="btn btn-large btn-primary disabled">主链接</a>
            <a href="#" class="btn btn-large disabled">链接</a>
          </p>
<pre class="prettyprint linenums">
&lt;a href="#" class="btn btn-large btn-primary disabled"&gt;主链接&lt;/a&gt;
&lt;a href="#" class="btn btn-large disabled"&gt;链接&lt;/a&gt;
</pre>
          <p>
            <span class="label label-info">注意!</span>
            我们这里把 <code>.disabled</code> 看做是一个实用属性, 与常见的 <code>.active</code> 属性类似, 所以无需添加前缀. 此外, 这个属性只是为了美观, 你必须使用JavaScript来禁用链接.
          </p>

          <h3>按钮元素</h3>
          <p>在<code>&lt;button&gt;</code>添加<code>disabled</code>.</p>
          <p class="bs-docs-example">
            <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">主按钮</button>
            <button type="button" class="btn btn-large" disabled>按钮</button>
          </p>
<pre class="prettyprint linenums">
&lt;button type="button" class="btn btn-large btn-primary disabled" disabled="disabled"&gt;主按钮&lt;/button&gt;
&lt;button type="button" class="btn btn-large" disabled&gt;按钮&lt;/button&gt;
</pre>


          <h2>一个属性, 支持多标签</h2>
          <p>在 <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, 或 <code>&lt;input&gt;</code> 元素使用 <code>.btn</code>.</p>
          <form class="bs-docs-example">
            <a class="btn" href="">Link</a>
            <button class="btn" type="submit">Button</button>
            <input class="btn" type="button" value="Input">
            <input class="btn" type="submit" value="Submit">
          </form>
<pre class="prettyprint linenums">
&lt;a class="btn" href=""&gt;Link&lt;/a&gt;
&lt;button class="btn" type="submit"&gt;Button&lt;/button&gt;
&lt;input class="btn" type="button" value="Input"&gt;
&lt;input class="btn" type="submit" value="Submit"&gt;
</pre>
          <p>一个最佳做法, 就是根据需要尝试找到一个合适的元素, 以确保渲染的效果在各个浏览器保存基本一致. 假如你正使用着一个 <code>input</code>, 那么你的按钮可使用 <code>&lt;input type="submit"&gt;</code>.</p>

        </section>



        <!-- Images
        ================================================== -->
        <section id="images">
          <div class="page-header">
            <h1>图像</h1>
          </div>

          <p>在任何项目可以很轻松的改变图像样式, 只需在 <code>&lt;img&gt;</code> 元素添加属性</p>
          <div class="bs-docs-example bs-docs-example-images">
            <img data-src="holder.js/140x140" class="img-rounded">
            <img data-src="holder.js/140x140" class="img-circle">
            <img data-src="holder.js/140x140" class="img-polaroid">
          </div>
<pre class="prettyprint linenums">
&lt;img src="..." class="img-rounded"&gt;
&lt;img src="..." class="img-circle"&gt;
&lt;img src="..." class="img-polaroid"&gt;
</pre>
          <p><span class="label label-info">注意!</span>  IE7-8不支持<code>.img-rounded</code> 和 <code>.img-circle</code>, 因为它们缺少对 <code>border-radius</code> 的支持.</p>


        </section>



        <!-- Icons
        ================================================== -->
        <section id="icons">
          <div class="page-header">
            <h1>图标 <small><a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1>
          </div>

          <h2>图标的含义</h2>
          <p>140个图标在精灵(sprite)表里, 由<a href="http://glyphicons.com" target="_blank">Glyphicons</a>提供, 有暗灰色(默认)和白色可用.</p>
          <ul class="the-icons clearfix">
            <li><i class="icon-glass"></i> icon-glass</li>
            <li><i class="icon-music"></i> icon-music</li>
            <li><i class="icon-search"></i> icon-search</li>
            <li><i class="icon-envelope"></i> icon-envelope</li>
            <li><i class="icon-heart"></i> icon-heart</li>
            <li><i class="icon-star"></i> icon-star</li>
            <li><i class="icon-star-empty"></i> icon-star-empty</li>
            <li><i class="icon-user"></i> icon-user</li>
            <li><i class="icon-film"></i> icon-film</li>
            <li><i class="icon-th-large"></i> icon-th-large</li>
            <li><i class="icon-th"></i> icon-th</li>
            <li><i class="icon-th-list"></i> icon-th-list</li>
            <li><i class="icon-ok"></i> icon-ok</li>
            <li><i class="icon-remove"></i> icon-remove</li>
            <li><i class="icon-zoom-in"></i> icon-zoom-in</li>
            <li><i class="icon-zoom-out"></i> icon-zoom-out</li>
            <li><i class="icon-off"></i> icon-off</li>
            <li><i class="icon-signal"></i> icon-signal</li>
            <li><i class="icon-cog"></i> icon-cog</li>
            <li><i class="icon-trash"></i> icon-trash</li>
            <li><i class="icon-home"></i> icon-home</li>
            <li><i class="icon-file"></i> icon-file</li>
            <li><i class="icon-time"></i> icon-time</li>
            <li><i class="icon-road"></i> icon-road</li>
            <li><i class="icon-download-alt"></i> icon-download-alt</li>
            <li><i class="icon-download"></i> icon-download</li>
            <li><i class="icon-upload"></i> icon-upload</li>
            <li><i class="icon-inbox"></i> icon-inbox</li>

            <li><i class="icon-play-circle"></i> icon-play-circle</li>
            <li><i class="icon-repeat"></i> icon-repeat</li>
            <li><i class="icon-refresh"></i> icon-refresh</li>
            <li><i class="icon-list-alt"></i> icon-list-alt</li>
            <li><i class="icon-lock"></i> icon-lock</li>
            <li><i class="icon-flag"></i> icon-flag</li>
            <li><i class="icon-headphones"></i> icon-headphones</li>
            <li><i class="icon-volume-off"></i> icon-volume-off</li>
            <li><i class="icon-volume-down"></i> icon-volume-down</li>
            <li><i class="icon-volume-up"></i> icon-volume-up</li>
            <li><i class="icon-qrcode"></i> icon-qrcode</li>
            <li><i class="icon-barcode"></i> icon-barcode</li>
            <li><i class="icon-tag"></i> icon-tag</li>
            <li><i class="icon-tags"></i> icon-tags</li>
            <li><i class="icon-book"></i> icon-book</li>
            <li><i class="icon-bookmark"></i> icon-bookmark</li>
            <li><i class="icon-print"></i> icon-print</li>
            <li><i class="icon-camera"></i> icon-camera</li>
            <li><i class="icon-font"></i> icon-font</li>
            <li><i class="icon-bold"></i> icon-bold</li>
            <li><i class="icon-italic"></i> icon-italic</li>
            <li><i class="icon-text-height"></i> icon-text-height</li>
            <li><i class="icon-text-width"></i> icon-text-width</li>
            <li><i class="icon-align-left"></i> icon-align-left</li>
            <li><i class="icon-align-center"></i> icon-align-center</li>
            <li><i class="icon-align-right"></i> icon-align-right</li>
            <li><i class="icon-align-justify"></i> icon-align-justify</li>
            <li><i class="icon-list"></i> icon-list</li>

            <li><i class="icon-indent-left"></i> icon-indent-left</li>
            <li><i class="icon-indent-right"></i> icon-indent-right</li>
            <li><i class="icon-facetime-video"></i> icon-facetime-video</li>
            <li><i class="icon-picture"></i> icon-picture</li>
            <li><i class="icon-pencil"></i> icon-pencil</li>
            <li><i class="icon-map-marker"></i> icon-map-marker</li>
            <li><i class="icon-adjust"></i> icon-adjust</li>
            <li><i class="icon-tint"></i> icon-tint</li>
            <li><i class="icon-edit"></i> icon-edit</li>
            <li><i class="icon-share"></i> icon-share</li>
            <li><i class="icon-check"></i> icon-check</li>
            <li><i class="icon-move"></i> icon-move</li>
            <li><i class="icon-step-backward"></i> icon-step-backward</li>
            <li><i class="icon-fast-backward"></i> icon-fast-backward</li>
            <li><i class="icon-backward"></i> icon-backward</li>
            <li><i class="icon-play"></i> icon-play</li>
            <li><i class="icon-pause"></i> icon-pause</li>
            <li><i class="icon-stop"></i> icon-stop</li>
            <li><i class="icon-forward"></i> icon-forward</li>
            <li><i class="icon-fast-forward"></i> icon-fast-forward</li>
            <li><i class="icon-step-forward"></i> icon-step-forward</li>
            <li><i class="icon-eject"></i> icon-eject</li>
            <li><i class="icon-chevron-left"></i> icon-chevron-left</li>
            <li><i class="icon-chevron-right"></i> icon-chevron-right</li>
            <li><i class="icon-plus-sign"></i> icon-plus-sign</li>
            <li><i class="icon-minus-sign"></i> icon-minus-sign</li>
            <li><i class="icon-remove-sign"></i> icon-remove-sign</li>
            <li><i class="icon-ok-sign"></i> icon-ok-sign</li>

            <li><i class="icon-question-sign"></i> icon-question-sign</li>
            <li><i class="icon-info-sign"></i> icon-info-sign</li>
            <li><i class="icon-screenshot"></i> icon-screenshot</li>
            <li><i class="icon-remove-circle"></i> icon-remove-circle</li>
            <li><i class="icon-ok-circle"></i> icon-ok-circle</li>
            <li><i class="icon-ban-circle"></i> icon-ban-circle</li>
            <li><i class="icon-arrow-left"></i> icon-arrow-left</li>
            <li><i class="icon-arrow-right"></i> icon-arrow-right</li>
            <li><i class="icon-arrow-up"></i> icon-arrow-up</li>
            <li><i class="icon-arrow-down"></i> icon-arrow-down</li>
            <li><i class="icon-share-alt"></i> icon-share-alt</li>
            <li><i class="icon-resize-full"></i> icon-resize-full</li>
            <li><i class="icon-resize-small"></i> icon-resize-small</li>
            <li><i class="icon-plus"></i> icon-plus</li>
            <li><i class="icon-minus"></i> icon-minus</li>
            <li><i class="icon-asterisk"></i> icon-asterisk</li>
            <li><i class="icon-exclamation-sign"></i> icon-exclamation-sign</li>
            <li><i class="icon-gift"></i> icon-gift</li>
            <li><i class="icon-leaf"></i> icon-leaf</li>
            <li><i class="icon-fire"></i> icon-fire</li>
            <li><i class="icon-eye-open"></i> icon-eye-open</li>
            <li><i class="icon-eye-close"></i> icon-eye-close</li>
            <li><i class="icon-warning-sign"></i> icon-warning-sign</li>
            <li><i class="icon-plane"></i> icon-plane</li>
            <li><i class="icon-calendar"></i> icon-calendar</li>
            <li><i class="icon-random"></i> icon-random</li>
            <li><i class="icon-comment"></i> icon-comment</li>
            <li><i class="icon-magnet"></i> icon-magnet</li>

            <li><i class="icon-chevron-up"></i> icon-chevron-up</li>
            <li><i class="icon-chevron-down"></i> icon-chevron-down</li>
            <li><i class="icon-retweet"></i> icon-retweet</li>
            <li><i class="icon-shopping-cart"></i> icon-shopping-cart</li>
            <li><i class="icon-folder-close"></i> icon-folder-close</li>
            <li><i class="icon-folder-open"></i> icon-folder-open</li>
            <li><i class="icon-resize-vertical"></i> icon-resize-vertical</li>
            <li><i class="icon-resize-horizontal"></i> icon-resize-horizontal</li>
            <li><i class="icon-hdd"></i> icon-hdd</li>
            <li><i class="icon-bullhorn"></i> icon-bullhorn</li>
            <li><i class="icon-bell"></i> icon-bell</li>
            <li><i class="icon-certificate"></i> icon-certificate</li>
            <li><i class="icon-thumbs-up"></i> icon-thumbs-up</li>
            <li><i class="icon-thumbs-down"></i> icon-thumbs-down</li>
            <li><i class="icon-hand-right"></i> icon-hand-right</li>
            <li><i class="icon-hand-left"></i> icon-hand-left</li>
            <li><i class="icon-hand-up"></i> icon-hand-up</li>
            <li><i class="icon-hand-down"></i> icon-hand-down</li>
            <li><i class="icon-circle-arrow-right"></i> icon-circle-arrow-right</li>
            <li><i class="icon-circle-arrow-left"></i> icon-circle-arrow-left</li>
            <li><i class="icon-circle-arrow-up"></i> icon-circle-arrow-up</li>
            <li><i class="icon-circle-arrow-down"></i> icon-circle-arrow-down</li>
            <li><i class="icon-globe"></i> icon-globe</li>
            <li><i class="icon-wrench"></i> icon-wrench</li>
            <li><i class="icon-tasks"></i> icon-tasks</li>
            <li><i class="icon-filter"></i> icon-filter</li>
            <li><i class="icon-briefcase"></i> icon-briefcase</li>
            <li><i class="icon-fullscreen"></i> icon-fullscreen</li>
          </ul>

          <h3>Glyphicons的来源</h3>
          <p><a href="http://glyphicons.com/">Glyphicons</a>一般不会提供免费, 但Bootstrap和Glyphicons的创作者之间的协调, 让作为开发人员的你免费使用. 与此同时, 我们也希望你在实际使用的时候, 可以添加一个<a href="http://glyphicons.com/">Glyphicons</a>的链接.</p>


          <hr class="bs-docs-separator">


          <h2>如何使用</h2>
          <p>所有图标都需要一个独特、前缀带 <code>icon-</code>属性的<code>&lt;i&gt;</code> 标签. 如需使用时, 可直接将以下代码使用在任何地方:</p>
<pre class="prettyprint linenums">
&lt;i class="icon-search"&gt;&lt;/i&gt;
</pre>
          <p>也可以使用风格相反(白色)的图标, 这里准备了一个额外的属性. 我们将具体展示这些属性在导航条和下拉菜单中悬停和活动时候的状态效果.</p>
<pre class="prettyprint linenums">
&lt;i class="icon-search icon-white"&gt;&lt;/i&gt;
</pre>
          <p>
            <span class="label label-info">注意!</span>
            当在旁边使用文本, 按钮或导航链接, 为了有一个适当的间距, 请一定要在<code>&lt;i&gt;</code>后面留一个空格位置.
          </p>


          <hr class="bs-docs-separator">


          <h2>图标例子</h2>
          <p>使用在按钮, 工具栏的按钮组合, 导航, 或表单的前缀输入框.</p>

          <h4>按钮</h4>

          <h5>按钮工具栏</h5>
          <div class="bs-docs-example">
            <div class="btn-toolbar">
              <div class="btn-group">
                <a class="btn" href="#"><i class="icon-align-left"></i></a>
                <a class="btn" href="#"><i class="icon-align-center"></i></a>
                <a class="btn" href="#"><i class="icon-align-right"></i></a>
                <a class="btn" href="#"><i class="icon-align-justify"></i></a>
              </div>
            </div>
          </div>
<pre class="prettyprint linenums">
&lt;div class="btn-toolbar"&gt;
  &lt;div class="btn-group"&gt;
    &lt;a class="btn" href="#"&gt;&lt;i class="icon-align-left"&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;a class="btn" href="#"&gt;&lt;i class="icon-align-center"&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;a class="btn" href="#"&gt;&lt;i class="icon-align-right"&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;a class="btn" href="#"&gt;&lt;i class="icon-align-justify"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>

          <h5>下拉菜单</h5>
          <div class="bs-docs-example">
            <div class="btn-group">
              <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> 用户</a>
              <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#"><i class="icon-pencil"></i> 编辑</a></li>
                <li><a href="#"><i class="icon-trash"></i> 删除</a></li>
                <li><a href="#"><i class="icon-ban-circle"></i> 禁止</a></li>
                <li class="divider"></li>
                <li><a href="#"><i class="i"></i> 编辑</a></li>
              </ul>
            </div>
          </div>
<pre class="prettyprint linenums">
&lt;div class="btn-group"&gt;
  &lt;a class="btn btn-primary" href="#"&gt;&lt;i class="icon-user icon-white"&gt;&lt;/i&gt; 用户&lt;/a&gt;
  &lt;a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"&gt;&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;ul class="dropdown-menu"&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-pencil"&gt;&lt;/i&gt; 编辑&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-trash"&gt;&lt;/i&gt; 删除&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-ban-circle"&gt;&lt;/i&gt; 禁止&lt;/a&gt;&lt;/li&gt;
    &lt;li class="divider"&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;i class="i"&gt;&lt;/i&gt; 编辑&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</pre>

          <h5>按钮尺寸</h5>
          <div class="bs-docs-example">
            <a class="btn btn-large" href="#"><i class="icon-star"></i> 星星</a>
            <a class="btn btn-small" href="#"><i class="icon-star"></i> 星星</a>
            <a class="btn btn-mini" href="#"><i class="icon-star"></i> 星星</a>
          </div>
<pre class="prettyprint linenums">
&lt;a class="btn btn-large" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt; 星星&lt;/a&gt;
&lt;a class="btn btn-small" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt; 星星&lt;/a&gt;
&lt;a class="btn btn-mini" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt; 星星&lt;/a&gt;
</pre>

          <h4>导航</h4>
          <div class="bs-docs-example">
            <div class="well" style="padding: 8px 0; margin-bottom: 0;">
              <ul class="nav nav-list">
                <li class="active"><a href="#"><i class="icon-home icon-white"></i> 首页</a></li>
                <li><a href="#"><i class="icon-book"></i> 库</a></li>
                <li><a href="#"><i class="icon-pencil"></i> 应用程序</a></li>
                <li><a href="#"><i class="i"></i> 其他</a></li>
              </ul>
            </div>
          </div>
<pre class="prettyprint linenums">
&lt;ul class="nav nav-list"&gt;
  &lt;li class="active"&gt;&lt;a href="#"&gt;&lt;i class="icon-home icon-white"&gt;&lt;/i&gt; 首页&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-book"&gt;&lt;/i&gt; 库&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-pencil"&gt;&lt;/i&gt; 应用程序&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;&lt;i class="i"&gt;&lt;/i&gt; 其他&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>

          <h4>表单域</h4>
          <form class="bs-docs-example form-horizontal">
            <div class="control-group">
              <label class="control-label" for="inputIcon">邮箱地址</label>
              <div class="controls">
                <div class="input-prepend">
                  <span class="add-on"><i class="icon-envelope"></i></span><input class="span2" id="inputIcon" type="text">
                </div>
              </div>
            </div>
          </form>
<pre class="prettyprint linenums">
&lt;div class="control-group"&gt;
  &lt;label class="control-label" for="inputIcon"&gt;邮箱地址&lt;/label&gt;
  &lt;div class="controls"&gt;
    &lt;div class="input-prepend"&gt;
      &lt;span class="add-on"&gt;&lt;i class="icon-envelope"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;input class="span2" id="inputIcon" type="text"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>

        </section>



      </div>
    </div>

  </div>



    <!-- Footer
    ================================================== -->
    <footer class="footer">
      <div class="container">
        <p>由 <a href="http://twitter.com/mdo" target="_blank">@mdo</a> 和 <a href="http://twitter.com/fat" target="_blank">@fat</a> 用世界上最具特别的爱来设计和建造.</p>
        <p>代码许可依据<a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, 文档许可依据<a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <p><a href="http://glyphicons.com">Glyphicons Free</a> 授权依据 <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <p>译者: iXieMin <a href="http://xiemin.me/" target="_blank">博客</a> <a href="http://weibo.com/ixiemin" target="_blank">微博</a></p>
        <ul class="footer-links">
          <li><a href="http://blog.getbootstrap.com">博客</a></li>
          <li class="muted">&middot;</li>
          <li><a href="https://github.com/twitter/bootstrap/issues?state=open">问题</a></li>
          <li class="muted">&middot;</li>
          <li><a href="https://github.com/twitter/bootstrap/blob/master/CHANGELOG.md">更改记录</a></li>
        </ul>
      </div>
    </footer>



    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/bootstrap-transition.js"></script>
    <script src="assets/js/bootstrap-alert.js"></script>
    <script src="assets/js/bootstrap-modal.js"></script>
    <script src="assets/js/bootstrap-dropdown.js"></script>
    <script src="assets/js/bootstrap-scrollspy.js"></script>
    <script src="assets/js/bootstrap-tab.js"></script>
    <script src="assets/js/bootstrap-tooltip.js"></script>
    <script src="assets/js/bootstrap-popover.js"></script>
    <script src="assets/js/bootstrap-button.js"></script>
    <script src="assets/js/bootstrap-collapse.js"></script>
    <script src="assets/js/bootstrap-carousel.js"></script>
    <script src="assets/js/bootstrap-typeahead.js"></script>
    <script src="assets/js/bootstrap-affix.js"></script>

    <script src="assets/js/holder/holder.js"></script>
    <script src="assets/js/google-code-prettify/prettify.js"></script>

    <script src="assets/js/application.js"></script>
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-34583971-1']);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>


  </body>
</html>
